import { storeToRefs } from "pinia";
import { Theme } from "./interface";
import { ElMessage } from "element-plus";
import { DEFAULT_PRIMARY } from "../config";
import { useGlobalStore } from "../store/modules/global";
import { generateElementPlusPalette } from "../utils/colorPalette";
import { asideTheme, AsideThemeType } from "../styles/theme/aside";
import type { Ref } from "vue";

/**
 * @description 全局主题 hooks
 * */
export const useTheme = () => {
  const globalStore = useGlobalStore();
  const { primary, isDark, asideInverted, layout } = storeToRefs(globalStore) as {
    primary: Ref<string>;
    isDark: Ref<boolean>;
    asideInverted: Ref<boolean>;
    layout: Ref<string>;
  };

  // 切换暗黑模式 ==> 并带修改主题颜色、侧边栏颜色
  const switchDark = () => {
    console.log('useTheme: switchDark 被调用，isDark:', isDark.value);
    const body = document.documentElement as HTMLElement;
    if (isDark.value) {
      body.setAttribute("class", "dark");
      console.log('useTheme: 设置 dark 类名');
    } else {
      body.setAttribute("class", "");
      console.log('useTheme: 移除 dark 类名');
    }
    changePrimary(primary.value);
    setAsideTheme();
  };

  // 修改主题颜色（使用科学的色阶生成算法）
  const changePrimary = (val: string | null) => {
    if (!val) {
      val = DEFAULT_PRIMARY;
      ElMessage({ type: "success", message: `主题颜色已重置为 ${DEFAULT_PRIMARY}` });
    }
    
    // 验证颜色格式
    const colorRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
    if (!colorRegex.test(val)) {
      console.warn('[useTheme] 无效的颜色格式:', val);
      val = DEFAULT_PRIMARY;
    }
    
    try {
      // 使用科学的色阶生成算法生成完整的色阶
      const palette = generateElementPlusPalette(val);
      
      const root = document.documentElement;
      
      // 应用基础色
      root.style.setProperty("--el-color-primary", palette.primary);
      
      // 应用浅色色阶（light-1 到 light-9）
      for (let i = 1; i <= 9; i++) {
        const key = `light-${i}` as keyof typeof palette;
        const color = palette[key];
        if (color) {
          root.style.setProperty(`--el-color-primary-light-${i}`, color);
        }
      }
      
      // 应用深色色阶（dark-1 到 dark-2）
      if (palette['dark-1']) {
        root.style.setProperty("--el-color-primary-dark-1", palette['dark-1']);
      }
      if (palette['dark-2']) {
        root.style.setProperty("--el-color-primary-dark-2", palette['dark-2']);
      }
      
      // 更新 store
      (globalStore as any).setGlobalState("primary", val);
      
      // 重新设置侧边栏主题（因为侧边栏使用了主题色）
      setAsideTheme();
      
      console.log('[useTheme] 主题颜色已更新:', val);
    } catch (error) {
      console.error('[useTheme] 更新主题颜色失败:', error);
      ElMessage({ type: "error", message: "主题颜色更新失败" });
    }
  };

  // 设置侧边栏样式 ==> light、inverted、dark
  const setAsideTheme = () => {
    let type: AsideThemeType = "light";
    
    // 优先级1: transverse 布局下菜单栏为 inverted 模式
    if (layout.value == "transverse") {
      type = "inverted";
    }
    // 优先级2: 侧边栏反转色（vertical 布局模式）
    else if (layout.value == "vertical" && asideInverted.value) {
      type = "inverted";
    }
    // 优先级3: 暗黑模式（且不是 inverted 模式时）
    else if (isDark.value && !asideInverted.value) {
      type = "dark";
    }
    // 默认: 明亮模式（浅色侧边栏）- 白色背景 + 深色文字
    else {
      type = "light";
    }
    
    const theme = asideTheme[type];
    const root = document.documentElement;
    
    // 直接使用 CSS 变量，让浏览器自动解析（更兼容、性能更好）
    // CSS 变量引用会自动跟随 --el-color-primary 的变化
    for (const [key, value] of Object.entries(theme)) {
      root.style.setProperty(key, value);
    }
    
    console.log('[useTheme] 侧边栏主题已更新:', {
      type,
      layout: layout.value,
      isDark: isDark.value,
      asideInverted: asideInverted.value,
      menuBgColor: theme['--el-menu-bg-color'],
      menuTextColor: theme['--el-menu-text-color'],
      menuActiveTextColor: theme['--el-menu-active-text-color'],
    });
  };
  // 默认暗黑模式
  if (isDark.value) {
    switchDark();
  }
  // init theme
  const initTheme = () => {
    console.log('[useTheme] 开始初始化主题...');
    
    // 1. 初始化深色模式
    switchDark();
    
    // 2. 应用当前主题色（确保菜单等UI元素正确显示）
    const currentPrimary = primary.value || DEFAULT_PRIMARY;
    console.log('[useTheme] 初始化应用主题色:', currentPrimary);
    changePrimary(currentPrimary);
    
    // 3. 更新侧边栏主题
    setAsideTheme();
    
    console.log('[useTheme] ✅ 主题初始化完成');
  };

  return {
    initTheme,
    switchDark,
    changePrimary,
    setAsideTheme
  };
};
